import { Component, Vue } from 'vue-property-decorator'
import style from '../News/News.less'
import { Action } from 'vuex-class'
@Component
export default class FAQ extends Vue {
  private pageIndex: number = 1
  private pageSize: number = 10
  private total: number = 0
  private list: any[] = []
  private loading: boolean = false

  @Action('homepage/queryFAQList') private queryFAQList!: any

  private render() {
    return (
      <div class={style.container}>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to={{ path: '/homepage/first' }}>
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item>常见问题</el-breadcrumb-item>
        </el-breadcrumb>
        <div class={{ [style.content]: true, [style.faqContent]: true }}>
          <p class={style.title}>常见问题</p>
          <div class={style.list} v-loading={this.loading}>
            <ul>
              {this.list.length > 0 ? (
                this.list.map((item: any) => {
                  return (
                    <li>
                      <p class={style.question}>
                        {item.isTop && <span class={style.isTop}>推荐</span>}
                        <span>{item.title || <span>&nbsp;</span>}</span>
                      </p>
                      <p class={style.answer}>{item.content}</p>
                    </li>
                  )
                })
              ) : (
                <div class={style.empty}>暂无数据</div>
              )}
            </ul>
          </div>
          {this.list && this.list.length > 0 && (
            <el-pagination
              class={{ [style.pagination]: true }}
              onSize-change={this.handleSizeChange}
              onCurrent-change={this.handleCurrentChange}
              current-page={this.pageIndex}
              page-sizes={[10, 20, 30]}
              page-size={this.pageSize}
              layout="total, sizes, prev, pager, next, jumper"
              total={this.total}
              pager-count={5}
            />
          )}
        </div>
      </div>
    )
  }

  private moreHandler() {
    this.$emit('more')
  }

  private handleSizeChange(val: number) {
    this.pageIndex = 1
    this.pageSize = val
    this.queryList()
  }

  private handleCurrentChange(val: number) {
    this.pageIndex = val
    this.queryList()
  }

  private queryList() {
    this.loading = true
    this.queryFAQList({ pageIndex: this.pageIndex, pageNumber: this.pageSize })
      .then((res: any) => {
        this.loading = false
        this.list = res.list
        this.total = res.total
      })
      .catch((e: any) => {
        this.loading = false
      })
  }
  private async query() {
    this.pageIndex = 1
    this.queryList()
  }
  private mounted() {
    this.query()
  }

  private rowClick(row: any, column: any, event: any) {
    alert(row.id)
  }
}
